import React, { useState, useEffect } from 'react';
import {List, Avatar} from 'antd';
import {
  LikeOutlined,
  StarTwoTone
} from "@ant-design/icons";



interface Props {
  postList?: API.PostVO[];
}

const PostList: React.FC<Props> = (props) => {
  const defaultPostList: any[] = [];
  const [postList, setPostList] = useState<API.PostVO[]>(props.postList || defaultPostList);

  useEffect(() => {
    setPostList(props.postList || defaultPostList);
  }, [props.postList]);

  return (
    <List
      itemLayout="horizontal"
      dataSource={postList}
      renderItem={(item) => (
        <List.Item>
          <List.Item.Meta
            avatar={<Avatar src={item.user!!.userAvatar}/>}
            title={<a href="https://www.antdv.com/">{item.title}</a>}
            description={item.content}
          />
          <div>
            <LikeOutlined/>
            {item.thumbNum}
            <StarTwoTone/>
            {item.favourNum}
          </div>
        </List.Item>

      )}
    />
  );
};

export default PostList;
